<template>
  <div class="home">
    <el-container>
      <el-header>课程设计项目管理 | 管理员</el-header>
      <el-container>
        <el-aside>
          Aside
          <span @click="goTo('/CourseManage')">课程管理</span>
          <span @click="goTo('/CourseSchedule')">课程安排</span>
          <span @click="goTo('/CourseSchedule')">课程安排</span>
          <span @click="goTo('/CourseSchedule')">课程安排</span>
        </el-aside>
        <el-container>
          <el-main>Main
<!--            <router-view></router-view>-->
          </el-main>
          <el-footer>
            <Footer></Footer>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
import Footer from "@/components/Footer";

export default {
  name: 'Index',
  components: {
    Footer
  },
  methods: {
    goTo(path) {
      this.$router.replace(path);
    }
  }
}
</script>
<style>
.home {
  width: 100%;
  height: 100%;
  min-width: 1000px;
  min-height: 800px;
}

.el-header {
  /*position: fixed;*/
  width: 100%;
  /*z-index: 999;*/
}

.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  /*position: fixed;*/
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  /*line-height: 200px;*/
  height: 100%;
  width: 200px;
  min-width: 200px;
  max-width: 200px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
  min-height: 2000px;
}

.el-container {
  width: 100%;
  height: 100%;
}

</style>

